<template>
    <component :is="currentComponent" v-on:changeItem="handleChangeTab" :currentItem="currentItem"
        :currentType="currentType" ref="componentRef" />
</template>

<script setup lang="ts">
import { ref, computed, markRaw } from 'vue';
import List from './components/List.vue';
import AddEdit from './components/AddEdit.vue';

interface CurrentItem {
    rowData: any;
    tableData: Array<any>;
}

const componentList = [
    { name: '主页表格', com: markRaw(List) },
    { name: '新增修改查看模块', com: markRaw(AddEdit) }
];

const componentRef = ref<InstanceType<typeof AddEdit> | null>(null);
const currentIndex = ref(0);

const currentItem = ref<CurrentItem | null>(null);
const currentType = ref<string | null>(null);

const currentComponent = computed(() => componentList[currentIndex.value].com);

const handleChangeTab = (tab: number, item?: CurrentItem, type?: string) => {
    currentIndex.value = tab;
    currentItem.value = item || null;
    currentType.value = type || null;
};
</script>